<template>
	<view class="page">
		<Header> 课程详情 </Header>
		<div class="info" v-if="info.Id">
			<div class="proImg">
				<Nimg :src="info.src + info.photo" width="750" height="600" mode="widthFix" />
			</div>
			<div class="proIntro">
				<div class="price fx">
					<div class="dw">￥</div>
					<div class="num">{{ info.price }}</div>
				</div>
				<div class="line fx">
					<div class="yj">原价￥{{ info.oprice }}</div>
					<div class="fx1"></div>
					<div class="ys">已售{{ info.sold_num }}</div>
				</div>
				<div class="name">
					{{ info.name }}
				</div>
				<div class="ms">{{ info.info }}</div>
			</div>
			<div class="shuoming fx">
				<div class="kk">说明</div>
				<div class="vv">不支持退款</div>
			</div>
			<div class="kcjs">
				<div class="bt">课程介绍</div>
				<div class="mx">
					<div v-html="info.content"></div>
				</div>
			</div>
			<div style="height: 180rpx"></div>
			<div class="xbottom fx">
				<button open-type="share" hover-class="btn-hover" class="share">
					<div class="icon fx jcc">
						<Nimg src="007.png" width="29" height="29" />
					</div>
					<div class="wb fx jcc">分享</div>
				</button>
				<div class="btn fx jcc" @click="baomingPre">立即报名</div>
			</div>
		</div>
		<uni-popup ref="popupForBaoming" :safe-area="false">
			<div class="popupForBaoming">
				<div class="bt fx">
					<div style="width: 100rpx"></div>
					<div class="fx fx1 jcc">报名人</div>
					<div class="closeBtn fx jcc" @click="$refs.popupForBaoming.close()">
						<Nimg src="015.png" width="44" height="44" />
					</div>
				</div>
				<div class="form">
					<div class="line fx">
						<div class="name">姓名</div>
						<input class="srk fx1" type="text" v-model="usname" placeholder="请输入您的真实姓名" />
					</div>
					<div class="line fx">
						<div class="name">联系电话</div>
						<input class="srk fx1" type="text" v-model="ustel" placeholder="请输入您的联系电话" />
					</div>
				</div>
				<div class="xbottom fx jcc">
					<div class="bigBtn fx jcc" @click="baomingNow">
						确认报名
					</div>
				</div>
			</div>
		</uni-popup>
	</view>
</template>

<script>
	import $ from "@/common";
	export default {
		data() {
			return {
				id: "",
				sale_uid: 0,
				info: {},
				usname: "",
				ustel: "",
				us: {},
			};
		},
		methods: {
			getDetail() {
				let url = $.index("courseDetail");
				let data = {
					Id: this.id,
				};
				$.post(url, data).then((res) => {
					if (res.isError) {
						return;
					}
					res.content = res.content.replace(
						/src="\/course\/admin\/kindeditor\//gi,
						'style="max-width:100%;" src="' +
						$.domain +
						"/admin/kindeditor/"
					);
					this.info = res;
				});
			},
			baomingPre() {
				if (!this.us.receive_addr) {
					this.$go("zhanghaoshezhi?from=kechengxiangqing");
					return;
				}
				if (this.us.tel != "") {
					this.ustel = this.us.tel;
				}
				this.$refs.popupForBaoming.open("bottom");
			},
			baomingNow() {
				if (!$.isPhone(this.ustel)) {
					$.tip("请输入正确的联系电话");
					return;
				}
				if (this.usname.trim() == "") {
					$.tip("请输入您的真实姓名");
					return;
				}
				$.showLoading("请稍候...");
				let url = $.shopping("addOrder");
				let data = {
					product_id: this.id,
					product_name: this.info.name,
					product_num: 1,
					name: this.usname,
					tel: this.ustel,
					price: this.info.price,
					total_price: this.info.price,
					sid: this.sale_uid
				};
				$.post(url, data).then((res) => {
					if (res.isError) {
						return;
					}
					$.hideLoading();
					this.$refs.popupForBaoming.close();
					this.$go("dingdan");
				});
			},
		},
		onLoad(op) {
			if (op.id != undefined) {
				this.id = op.id;
				let suid = wx.getStorageSync('sale_uid' + this.id);
				if (suid != undefined && suid != "") {
					this.sale_uid = suid;
				}
			} else if (op.scene != undefined) {
				let arr = op.scene.split(':');
				this.id = arr[2];
				this.sale_uid = arr[1];
				wx.setStorageSync('sale_uid' + this.id, this.sale_uid);
			}
		},
		onShow() {
			$.login(() => {
				this.getDetail();
				$.getUsInfo().then((us) => {
					this.us = us;
				});
			});
		},
		onShareAppMessage: function(res) {
			let userId = $.getLocal("userId") || "";
			let title = this.info.name;
			let path =
				"/pages/kechengxiangqing?id=" + this.id + "&user_id=" + userId;
			let imageUrl = $.domain + this.info.src + this.info.photo.split(",")[0];

			return {
				title,
				path,
				imageUrl,
			};
		},
	};
</script>

<style lang="less" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		background: #fafafa;

		.info {
			.proIntro {
				width: 700rpx;
				margin: 0 auto;
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;
				margin-top: 16rpx;

				.price {
					color: #ff3107;
					font-weight: bold;
					font-size: 44rpx;

					.dw {
						font-size: 24rpx;
						padding-top: 8rpx;
					}
				}

				.line {
					color: #848484;
					font-size: 24rpx;
					padding-top: 16rpx;
				}

				.name {
					padding-top: 16rpx;
					font-weight: bold;
					font-size: 32rpx;
					line-height: 1.5;
				}

				.ms {
					color: #848484;
					margin-top: 16rpx;
				}
			}

			.shuoming {
				width: 700rpx;
				margin: 0 auto;
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;
				margin-top: 16rpx;

				.kk {
					width: 88rpx;
					color: #848484;
				}
			}

			.kcjs {
				width: 700rpx;
				margin: 0 auto;
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;
				margin-top: 16rpx;

				.bt {
					font-size: 32rpx;
					font-weight: bold;
					color: #000;
				}

				.mx {
					padding-top: 30rpx;
				}
			}

			.xbottom {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				background: #fff;
				height: 150rpx;
				padding-bottom: 25rpx;
				border-top: 2rpx solid #f3f2ee;

				.share {
					width: 126rpx;

					.wb {
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}

				.btn {
					width: 580rpx;
					height: 80rpx;
					background: #1fd280;
					font-size: 32rpx;
					color: #fff;
					border-radius: 240rpx;
				}
			}
		}
	}

	.popupForBaoming {
		background: #fff;
		width: 750rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		padding-bottom: 30rpx;

		.bt {
			height: 120rpx;
			font-size: 32rpx;
			font-weight: bold;

			.closeBtn {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.line {
			border-bottom: 2rpx solid #f2f2f2;
			height: 110rpx;
			margin: 0 38rpx;

			.name {
				width: 176rpx;
			}

			&:last-child {
				border: 0;
			}
		}

		.xbottom {
			border-top: 2rpx solid #f2f2f2;
			height: 150rpx;

			.bigBtn {
				width: 580rpx;
				height: 80rpx;
				background: #1fd280;
				font-size: 32rpx;
				color: #fff;
				border-radius: 240rpx;
			}
		}
	}
</style>